<template>
	<view class="containar">
		<view class="avatarUrl">
			<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
				<image :src="avatarUrl" class="refreshIcon"></image>
			</button>
		</view>
		<view class="userName">
			<text>昵称：</text>
			<input type="nickname" class="weui-input" :value="userName" @blur="userNameInput" placeholder="请输入昵称"
				@input="bindinput" />
		</view>
		<view class="btn juedui" style="margin: 50rpx auto;width: 80%;">
			<u-button text="保存" @click="onSubmit()" shape="circle"
				color="linear-gradient(to right, #3AA3FF,#005DFF)"></u-button>
		</view>
	</view>
</template>
<script>
	import {
		userInfo,
		userEdit
	} from '@/api/url.js'
	export default {
		data() {
			return {
				avatarUrl: '',
				userName: '',
				token: uni.getStorageSync('token')
			};
		},
		onLoad(option) {},
		onShow() {
			userInfo(this.token).then(res => {
				console.log(res)
			})
		},
		methods: {
			bindblur(e) {
				this.userName = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				this.userName = e.detail.value; // 获取微信昵称
			},
			// 点击昵称
			userNameInput(e) {
				console.log(e.detail);
				this.nickName = e.detail.value
				let userInfo = uni.getStorageSync("user_info")
				userInfo.nickName = e.detail.value
				uni.setStorageSync("user_info", userInfo)
				console.log('点昵称', this.nickName, e.detail.value, uni.getStorageSync("user_info"));
			},
			onChooseavatar(e) {
				let self = this;
				let {
					avatarUrl
				} = e.detail;
				this.avatarUrl = avatarUrl
			},
			onSubmit() {
				var that = this
				console.log(that.userName, that.avatarUrl)
				// var data = {
				// 	username: that.userName,
				// 	avatar: that.avatarUrl
				// }
				// userEdit(data, this.token).then(res => {
				// 	console.log(res)
				// })
				// uni.login({
				// 	"provider": "weixin",
				// 	// "onlyAuthorize": true, // 微信登录仅请求授权认证
				// 	success: function(event) {
				// 		const {
				// 			code
				// 		} = event
				// 		const name = that.userName
				// 判断头像以及昵称不为空 再上传
				// if (that.userName && that.avatarUrl) {
				uni.uploadFile({
					url: "http://j46hbc.natappfree.cc/common/upload", //请求路径
					filePath: that.avatarUrl,
					fileType: "image",
					name: 'img',
					success: uploadFileRes => {
						let data = JSON.parse(uploadFileRes.data);
						console.log(data, 'data')
						//将个人信息保存到全局
						// that.$store.dispatch("user/saveUserInfo", data.data);
						// 跳转到我的界面
					},
					fail: (error) => {
						uni.showToast({
							title: "保存错误",
						});
					}
				});
				// } else {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请上传头像并填写昵称'
				// 	})
				// 	return false;
				// }
				// },
				// fail: function(err) {
				// 	// 登录授权失败  
				// 	// err.code是错误码
				// }
				// })
			}
		}
	}
</script>
<style lang="scss" scoped>
	.containar {
		.avatarUrl {
			padding: 80rpx 0 40rpx;
			background: #fff;

			button {
				background: #fff;
				line-height: 80rpx;
				height: auto;
				border: none !important;
				width: auto;
				// padding: 20rpx 30rpx;
				margin: 0;
				display: flex;
				border: none;
				justify-content: center;
				align-items: center;

				&::after {
					border: none;
				}

				.refreshIcon {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					background-color: #ccc;
				}

				.jt {
					width: 14rpx;
					height: 28rpx;
				}
			}
		}

		.userName {
			background: #fff;
			padding: 20rpx 30rpx 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.weui-input {
				padding-left: 60rpx;
			}
		}

		.btn {
			width: 100%;

			.btn-sub {
				width: 670rpx;
				margin: 80rpx auto 0;
				height: 90rpx;
				background: #DF8585;
				border-radius: 45rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 36rpx;
				color: #fff;
			}
		}
	}
</style>